<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <span class="s1">{{ $t('basics.sendNumber') }}</span>
                        <a-input
                            v-model="state.system_phonenumber"
                            :placeholder="$t('basics.enterSendNumber')"
                        />
                    </div>
                    <div>
                        <span class="s1">{{ $t('basics.targetNumber') }}</span>
                        <a-input
                            v-model="state.target_phonenumber"
                            :placeholder="$t('basics.enterSendNumber')"
                        />
                    </div>
                    <div>
                        <span class="s1">{{ $t('basics.status') }}</span>
                        <a-select
                            style="width: 120px"
                            v-model="state.status"
                            :placeholder="$t('basics.textStatus')"
                            allow-clear
                        >
                            <a-option
                                :label="$t('basics.weifasong')"
                                :value="1"
                            ></a-option>
                            <a-option
                                :label="$t('basics.fasongzhong')"
                                :value="2"
                            ></a-option>
                            <a-option
                                :label="$t('basics.successTxt')"
                                :value="3"
                            ></a-option>
                            <a-option
                                :label="$t('basics.shibai')"
                                :value="4"
                            ></a-option>
                        </a-select>
                    </div>
                    <div>
                        <a-button class="mr20" type="primary" @click="search">
                            <icon-search class="mr6" />
                            {{ $t('basics.search') }}
                        </a-button>
                        <a-button type="secondary" @click="reset">
                            <icon-refresh class="mr6" />
                            {{ $t('basics.reset') }}
                        </a-button>
                    </div>
                </div>
            </div>
            <div class="container-content">
                <div class="container-content-button"></div>
                <div class="container-content-table">
                    <a-table
                        :columns="columns"
                        :data="tableList"
                        :loading="loading"
                        row-key="id"
                        :pagination="false"
                    >
                        <template #status="{ record }">
                            <span v-if="record.status == 1">{{
                                $t('basics.weifasong')
                            }}</span>
                            <span v-if="record.status == 2">{{
                                $t('basics.fasongzhong')
                            }}</span>
                            <span v-if="record.status == 3">{{
                                $t('basics.successTxt')
                            }}</span>
                            <span v-if="record.status == 4">{{
                                $t('basics.shibai')
                            }}</span>
                        </template>
                    </a-table>
                    <div
                        class="_crud-footer mt-3 text-right"
                        ref="crudFooterRef"
                    >
                        <a-pagination
                            :total="state.total"
                            show-total
                            show-jumper
                            show-page-size
                            @page-size-change="getList"
                            @change="getList"
                            v-model:current="state.currentPage"
                            v-model:page-size="state.pageSize"
                            style="display: inline-flex"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance } from 'vue';
// import {
//     getListByUser,
//     getListByUserDetail
// } from '@/api/america/massProduction.js';
import { getProjectList } from '@/api/cloud/client.js';
import { useRouter, useRoute } from 'vue-router';
import { $request } from '@/utils/request.js';

import { useUserStore } from '@/store';

import { useI18n } from 'vue-i18n';
const { t } = useI18n();

const user = useUserStore().user;
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const loading = ref(true);
const columns = [
    {
        title: t('basics.sendNumber'),
        dataIndex: 'system_phonenumber',
        width: 150,
        slotName: 'system_phonenumber'
    },
    {
        title: t('basics.targetNumber'),
        dataIndex: 'target_phonenumber',
        width: 150,
        slotName: 'target_phonenumber'
    },
    {
        title: t('basics.xixiaoleirong'),
        dataIndex: 'message_content',
        slotName: 'message_content',
        ellipsis: true
    },
    {
        title: t('basics.subject'),
        dataIndex: 'subject',
        slotName: 'subject'
    },
    {
        title: t('basics.retryTimes'),
        dataIndex: 'retry_times'
    },
    {
        title: t('basics.status'),
        dataIndex: 'status',
        width: 100,
        slotName: 'status'
    },
    {
        title: t('basics.sendTime'),
        dataIndex: 'sent_at',
        width: 200,
        slotName: 'sent_at'
    }
];

const state = reactive({
    system_phonenumber: null,
    target_phonenumber: null,
    status: null,
    currentPage: 1,
    total: 0,
    pageSize: 20
});

const tableList = ref([]);

// 获取列表数据
const getList = () => {
    loading.value = true;
    let params = {
        task_id: route.query.task_id,
        user_id: user.id,
        system_phonenumber: state.system_phonenumber,
        target_phonenumber: state.target_phonenumber,
        status: state.status,
        page: state.currentPage,
        pageSize: state.pageSize
    };
    $request
        .get('/TcardClient/taskDetail/getList', params)
        .then(({ items, pageInfo }) => {
            tableList.value = items;
            state.total = pageInfo.total;
            //pageList.value = pageInfo;
            loading.value = false;
        });
    // getListByUserDetail(form.value).then((res) => {
    //     tableList.value = res.data.items;
    //     pageList.value = res.data.pageInfo;
    //     loading.value = false;
    // });
};
getList();

const search = () => {
    state.currentPage = 1;
    getList();
};
const reset = () => {
    state.system_phonenumber = null;
    state.target_phonenumber = null;
    state.status = null;
    state.currentPage = 1;
    getList();
};

// 获取项目列表
// const getProject = ref([]);
// const getProject = () => {
//     getProjectList().then((res) => {
//         projectList.value = res.data.items;
//     });
// };
</script>
<script>
export default { name: 'korea:taskDetail' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
.app-container {
    .container-head {
        .formButton {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .container-content {
        padding: 16px;
        .container-content-button {
            margin-bottom: 10px;
            .arco-btn {
                margin-right: 10px;
            }
        }
    }
}
.dialog-foot {
    text-align: end;
}
.arco-input-wrapper {
    width: inherit;
}
</style>
